import React from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import {
    PieOutline,
    FileOutline,
    TeamOutline,
    AddOutline,
    SetOutline,
} from 'antd-mobile-icons'
import './Tabbar.css'
export default function Tabbar() {
    const navigate = useNavigate()
    const location = useLocation()
    const { pathname } = location
    const tabs = [
        {
            key: '/home/Detail',
            title: '明细',
            icon: <FileOutline />,
        },
        {
            key: '/home/todo',
            title: '统计',
            icon: <PieOutline />,
        },
        {
            key: '/home/write',
            title: '记一笔',
            icon: <AddOutline />,
        },
        {
            key: '/home/user',
            title: '我的',
            icon: <TeamOutline />,
        },
        {
            key: '/home/setting',
            title: '设置',
            icon: <SetOutline />,
        },
    ]
    const setActiveKey = function (value) {
        // console.log(value);
        navigate(value)
    }
    return (
        <div className='Tabbar'>
            <TabBar activeKey={pathname} onChange={(value) => setActiveKey(value)}>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        </div>
    )
}
